<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树</title>
    <link rel="stylesheet" type="text/css" href="/static/zTree/v3/css/zTreeStyle/zTreeStyle.css">
</head>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>

<body>
</body>
<script type="text/javascript" src="/static/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="/static/zTree/v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">

    var setting = {
        check: {
            enable: true
        },
        callback: {
            onCheck: onCheck
        },
        view: {
            showIcon : false,
            dblClickExpand : true
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };
    setting.check.chkboxType = { "Y": "s", "N": "ps" }
    var zNodes = <?php echo htmlspecialchars_decode($data); ?>;
    $(document).ready(function(){ /**这是处理回显选中的方法*/
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        onCheck();
    });

    function onCheck(e, treeId, treeNode){  //这是将所有选中节点的名字 用,分割做拼接 用于持久化到数据库
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = zTree.getCheckedNodes(true),
            v = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].id + ",";
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        $("#test").attr("value", v);
    }
</script>
</html>